<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    :unique-opened="true"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          :index="route.path"
          @click="handleAdd(route)"
          v-for="route in router.getRoutes()"
          :key="route.path"
        >
          <RouterLink :to="route.path" active-class="active">{{
            route.name
          }}</RouterLink>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <!-- <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <template #title>Navigator Two</template>
        </el-menu-item> -->
    <!-- <el-menu-item index="3" disabled>
            <el-icon>
                <document />
            </el-icon>
            <template #title>Navigator Three</template>
        </el-menu-item> -->
    <!-- <el-menu-item index="4">
            <el-icon>
                <setting />
            </el-icon>
            <template #title>Navigator Four</template>
        </el-menu-item> -->
    <!-- <el-sub-menu index="5">
            <template #title>
                <el-icon>
                    <location />
                </el-icon>
                <span>Navigator Five</span>
            </template>
            <el-menu-item-group>
                <RouterLink to="/about" active-class="active"><el-menu-item index="5-1">About</el-menu-item>
                </RouterLink>
                <RouterLink to="/contact" active-class="active"><el-menu-item index="5-2">Contact</el-menu-item>
                </RouterLink>
                <el-menu-item index="5-3">item three</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu> -->
  </el-menu>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute, RouterLink } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import pinia from "@/store/pinia.js";
import { useStore } from "@/store/index.js";
const store = useStore(pinia);
const route = useRoute();
const router = useRouter();

console.log("路由列表：");
console.log(router.getRoutes());

const activeMenu = ref(route.path);

watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath;
    console.log("newPath");
    console.log(newPath);
    store.add(route);
  }
);

const isCollapse = ref(false);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

const handleAdd = (route) => {
  console.log("router.currentRoute.value.path");
  console.log(router.currentRoute.value.path);
  activeMenu.value = router.currentRoute.value.path;
  console.log("route.path");
  console.log(route.path)
  if (router.currentRoute.value.path === route.path) return;
  store.add(route);
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item a {
  width: 100% !important;
  color: #333;
}

.el-menu-item a:link {
  width: 100% !important;
  text-decoration: none;
}

.el-menu-item.is-active {
  background: #666;
}

.el-menu-item.is-active a {
  color: #fff !important;
}
</style>
